<template>
  <div class="todo_item_container">
    <div class="todo_item_check_box">
      <el-checkbox :checked="item.status"
      @change="onChange"></el-checkbox>
    </div>
    <div class="todo_item_text_box">{{item.todoText}}</div>
    <div class="todo_item_button_box">
      <el-button type="text"
      @click="onClickDelete">删除</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    item:{
      type:Object
    }
  },
  methods:{
    onChange(value){
      console.log(value)
      var tempTodo = {
        todoText:this.item.todoText,
        status:value
      }
      this.$store.commit("CHANFGE_TODO_STATUS",tempTodo)
    },
    onClickDelete(){
      this.$store.commit("DELETEE_TODO",this.item);
      this.$emit("delete");
    }
  }
}
</script>

<style scoped>
.todo_item_container
{
  width: 100%;
  height: 40px;
  border-bottom: 1px solid lightgray;
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
}

.todo_item_check_box
{
  width: 10%;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.todo_item_text_box
{
  width: 70%;
  height: 100%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.todo_item_button_box
{
  width: 20%;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
</style>